<!-- 推广海报 -->
<template>
	<!-- 分销海报 保存图片和立即分享——公众号长按即可保存和分享，不需要做按钮展示了 -->
	<view class="v-distribution-poster">
		<!-- 海报 -->
		<image :src="path" mode="widthFix" @click="handlePreviewImg([path], 0)"
			style="border-radius: 10rpx;width: 750rpx;"></image>
		<!-- basePainter 当path（海报路径为空）时进入失败返回绘制海报 -->
		<sunui-painter isRenderBlob custom-style="position: fixed; left: 200%;" :isRenderImage="true"
			:board="basePainter" @success="getSuccessInfo" @fail="getFailInfo"></sunui-painter>
		<view class="flex-column">
			<view class="btnCss2 margin-top_50rpx flex">长按图片进行保存</view>
			<view class="v-cancel" @click="cancel()">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteId: uni.getStorageSync('siteId'), // 站点id
				promoterGetInfo: uni.getStorageSync('promoterGetInfo'), // 站点id
				basePainter: {},
				path: '',
				// 海报
				poster: 'https://dazi.weijuyunke.cn/./uploads/qrcode/1724644290dfgvnd.png',
				// 背景图
				bj: 'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-08-26/165f9202408261149483947.png'
			};
		},
		onLoad() {
			// 推广海报
			// this.getPosters();
			this.handleShare();
		},
		onShow() {},
		methods: {
			
			// 推广海报
			async getPosters() {
				const result = await this.$http.post({
					url: this.$api.getPromotionalPoster,
					data: {
						siteId: this.siteId, //站点id
						userId: uni.getStorageSync('userId') //登录用户的id
					}
				});
				if (result.code == 200) {
					console.log('推广海报result.', result);
					let info = result.data;
					this.poster = info.distributionQrCode || ''; //推广二维码
					this.bj = info.distributionPoster || '/static/distribution-poster.png'; //推广背景
					this.handleShare();
				} else {
					this.$sun.toast(result.message);
				}
			},
            cancel(){
				this.$sun.navBack()
			},
			// 保存图片
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: result => {
						this.$sun.toast('保存成功，可以去分享啦~');
					},
					fail: err => {
						this.$sun.toast('保存失败，稍后再试');
					}
				});
			},
			// 分享行为
			shareImg() {
				wx.downloadFile({
					url: this.path, //分享的图片的链接
					success: res => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						});
					}
				});
			},
			// 海报生成以后的路径
			getSuccessInfo(e) {
				this.path = e;
				uni.hideLoading();
			},
			// 海报生成失败的路径
			getFailInfo(e) {
				uni.showModal({
					title: '提示',
					content: `${JSON.stringify(e)}`,
					showCancel: false
				});

				this.$sun.delay(2, () => {
					uni.hideLoading();
				});
			},
			handleShare() {
				uni.showLoading({
					title: '海报生成中...'
				});

				if (this.path) {
					this.getSuccessInfo(this.path);
				} else {
					this.basePainter = {
						width: '750rpx',
						height: '1300rpx',
						background: '#f7f7f7',
						views: [{
								type: 'image',
								url: `${this.promoterGetInfo.bg_url}`,
								mode: 'widthFix',
								css: {
									left: '30rpx',
									top: '26rpx',
									width: '690rpx',
									height: '1300rpx'
								}
							},
							{
								type: 'image',
								url: `${this.promoterGetInfo.invite_url}`,
								mode: 'widthFix',
								css: {
									left: '242rpx',
									top: '766rpx',
									width: '300rpx',
									height: '300rpx'
								}
							}
						]
					};
				}
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}

	.v-cancel {
		padding: 36rpx;
		font-size: 36rpx;
		color: #8f8f8f;
	}

	.v-distribution-poster {
		.v-btn {
			padding: 50rpx 110rpx;

			.v-sava,
			.v-share {
				border: 2rpx solid #a1a1a1;
				width: 226rpx;
				height: 64rpx;

				view {
					color: #5f5d5d;
					padding-left: 8rpx;
				}
			}

			.v-sava {
				text {
					font-size: 42rpx;
				}
			}

			.v-share {
				text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>